<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>烟花郑大图层</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .anchorBL{display:none}
    </style>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=sClwXDCZC6GLOdLlYevqoiEzfaUFzqP3"></script>
    <script src="//mapv.baidu.com/build/mapv.min.js"></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.141/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<script>
    /* global BMapGL */

    /* global mapv */

    /* global mapvgl */

    /* global initMap */

    var map = initMap({
        tilt: 73,
        heading: 150,
        center: [113.542146,34.823709],
        zoom: 19,
        viewMode: '3D'
    });

    var view = new mapvgl.View({
        map: map
    });
    var point = new BMapGL.Point(113.542146,34.823709);

    // 制造数据
    var sparkData1 = [];
    var sparkData2 = [];
    var sparkData3 = [];
    var randomNum = 40;
    // 随机生成点的偏移尺度，勿修改变量名
    var RANDOM_SIZE = 0.01;
    for (var i = 0; i < randomNum; i++) {
        var coord = [
            point.lng + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2,
            point.lat + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2
        ];
        sparkData1.push({
            geometry: {
                type: 'Point',
                coordinates: coord
            },
            properties: {
                height: parseInt(200 * Math.random(), 10)
            }
        });
    }
    for (var i = 0; i < randomNum; i++) {
        var coord = [
            point.lng + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2,
            point.lat + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2
        ];
        sparkData2.push({
            geometry: {
                type: 'Point',
                coordinates: coord
            },
            properties: {
                height: parseInt(200 * Math.random(), 10)
            }
        });
    }
    for (var i = 0; i < randomNum; i++) {
        var coord = [
            point.lng + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2,
            point.lat + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2
        ];
        sparkData3.push({
            geometry: {
                type: 'Point',
                coordinates: coord
            },
            properties: {
                height: parseInt(200 * Math.random(), 10)
            }
        });
    }

    var sparkLayer1 = new mapvgl.SparkLayer({
        height: function (data) {
            return data.properties.height;
        },
        step: 0.1,
        startTime: 1,
        endTime: 12,
        color: 'rgb(255, 153, 51)'
    });
    view.addLayer(sparkLayer1);

    var sparkLayer2 = new mapvgl.SparkLayer({
        height: function (data) {
            return data.properties.height;
        },
        color: 'rgb(255, 0, 255)'
    });
    view.addLayer(sparkLayer2);

    var sparkLayer3 = new mapvgl.SparkLayer({
        height: function (data) {
            return data.properties.height;
        },
        step: 0.1,
        startTime: 2,
        endTime: 10,
        color: 'rgb(0, 204, 255)'
    });
    view.addLayer(sparkLayer3);

    sparkLayer1.setData(sparkData1);
    sparkLayer2.setData(sparkData2);
    sparkLayer3.setData(sparkData3);

    fetch('https://mapv.baidu.com/gl/examples/static/chongqing.json').then(function (rs) {
        return rs.json();
    }).then(function (rs) {
        var data = rs;
        var polygons = [];
        var len = data.length;
        for (var i = 0; i < len / 10; i++) {
            var line = data[i];
            var polygon = [];
            var pt = [line[1] * 512, line[2] * 512];
            for (var j = 3; j < line.length; j += 2) {
                pt[0] += line[j] / 100 / 2;
                pt[1] += line[j + 1] / 100 / 2;
                polygon.push([pt[0], pt[1]]);
            }

            polygons.push({
                geometry: {
                    type: 'Polygon',
                    coordinates: [polygon]
                },
                properties: {
                    height: line[0] / 2
                }
            });
        }

        var shaperLayer = new mapvgl.ShapeLayer({
            blend: false,
            color: [36 / 255, 44 / 255, 60 / 255, 1]
        });

        view.addLayer(shaperLayer);

        shaperLayer.setData(polygons);

    });
</script>
</body>
</html>
